<template>
    <div class="user-frofile">
      <van-nav-bar class="app-nav-bar" title="个人信息" left-arrow @click-left="$router.back()" />
      <div>
         <input type="file" hidden 
         ref="file" 
         accept="image/png"
         @change = "onFileChange"
         >
         <van-cell title="头像" is-link center @click="$refs.file.click()" >
            <van-image
            width="30"
            height="30"
            round
            fit="cover"
            :src="user.photo"
            />
         </van-cell>
         <van-cell title="昵称" is-link :value="user.name"
         @click="isEditNameShow = true"/>
         <van-cell title="性别" is-link :value="user.gender === 0 ? '男' : '女'"
         @click="isEditGenderShow = true"/>
         <van-cell title="生日" is-link :value="user.birthday"
          @click="isEditBirthdayShow = true"/>
      </div>
      <!-- 弹出层 -->
      <!-- @update-name="user.name= $event"
         :name="user.name" -->
         <!-- v-model="user.name"   :value="user.name"默认传递value @input="user.name = $event" 默认监听input事件 -->
         <!--多数据用.sync修饰 :gender="user.gender"
         update-gender="user.gender = $event" -->
         <!-- :gender.sync ="user.gender" 
         :gender="user.gender"
         @update:gender="user.gender = $event" -->
         <!-- 昵称 -->
      <van-popup
         v-model="isEditNameShow"
         position="bottom"
         :style="{ height: '100%' }"
         >
         <update-name
         v-if = "isEditNameShow"
         @close="isEditNameShow = false"
         v-model="user.name"
         ></update-name>
      </van-popup>
      <!-- 性别 -->
       <van-popup
         v-model="isEditGenderShow"
         position="bottom"
         :style="{ height: '40%' }"
         >
         <update-gender
         @close="isEditGenderShow =false"
         v-model ="user.gender"
         ></update-gender>
       </van-popup>
       <!-- 生日 -->
       <van-popup
         v-model="isEditBirthdayShow"
         position="bottom"
         :style="{ height: '40%' }"
         >
         <update-birthday
         v-model="user.birthday"
          @close="isEditBirthdayShow =false"
          v-if="isEditPhotoShow"
         ></update-birthday>
       </van-popup>
       <!-- 头像 -->
       <van-popup
       class="update-photo-popup"
         v-model="isEditPhotoShow"
         position="bottom"
         :style="{ height: '100%' }"
         >
         <update-photo
         :file="previewImage"
         @close="isEditPhotoShow = false"
         @update-photo="user.photo = $event"
         ></update-photo>
       </van-popup>
    </div>
</template>
<script>
import { getUserProfile } from '@/api/user'
import UpdateName from './components/update-name'
import UpdateGender from './components/update-gender'
import UpdateBirthday from './components/update-birthday'
import UpdatePhoto from './components/update-photo'
export default {
   name:'UserProfile',
   components:{
      UpdateName,
      UpdateGender,
      UpdateBirthday,
      UpdatePhoto
   },
   data() {
      return {
         user:{},
         isEditNameShow:false,
         isEditGenderShow:false,
         isEditBirthdayShow:false,
         isEditPhotoShow:false,
         previewImage:''
      }
   },
   created(){
      this.loadProfile()
   },
   methods: {
      async loadProfile(){
         const res = await getUserProfile()
         // console.log(res);
         this.user = res.data.data
      },
      onFileChange(){
         this.isEditPhotoShow =true
         //在弹出层预览图片
         // const blob = window.URL.createObjectURL(this.$refs.file.files[0])
         const file = this.$refs.file.files[0]
         // console.log(blob);
         this.previewImage = file
         //解决相同事件不触发change
         this.$refs.file.value = ''
      }
   }
}
</script>
<style lang="scss" scoped>
.van-popup {
  background-color: #f5f7f9;
}
.update-photo-popup{
   background-color: #000;
}
</style>
